<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>table 数据表格文档 - layui.table</title>
	<link rel="stylesheet" href="../../libs/layui/layui-2.9.14/dist/css/layui.css">
	<script src="../../libs//layui//layui-2.9.14/dist/layui.js"></script>
	<style>


	</style>
</head>

<body style="margin:100px ;">

	<!-- 原始容器 -->
	<table id="demo" lay-filter="test"></table>

	<!-- table工具栏模板： -->
	<script type="text/html" id="toolbarDemo">
	  <div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
		<button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
		<button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
	  </div>
	</script>

	<!-- 行内工具栏模板： -->
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		
		<!-- 这里同样支持 laytpl 语法，如： -->
		{{#  if(d.auth > 2){ }}
		  <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
		{{#  } }}
	  </script>

	<script>

		layui.use('table', function () {
			var table = layui.table;

			//JS 调用：
			table.render({
				elem: '#demo'
				, page: true
				, toolbar: '#toolbarDemo'
				// 必须先开启 toolbar 时，defaultToolbar 才生效
				, defaultToolbar: ['filter', 'print', 'exports', {
					title: '提示' //标题
					, layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
					, icon: 'layui-icon-tips' //图标类名
				}]
				//禁用前端自动排序，以便由服务端直接返回排序好的数据
				, autoSort: false //禁用前端自动排序
				, url: '../assets/table/data.json' //数据接口
				, cols: [[ //表头
					{ field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' }
					, { field: 'username', title: '用户名', width: 80 }
					, { fixed: 'right', align: 'center', field: 'title', title: 'title' }

					, { field: 'checkbox', type: 'checkbox' }
					, { field: 'radio', type: 'radio' }
					, { field: 'numbers', type: 'numbers' }
					, { type: 'space', width: 50 }

					, { toolbar: '#barDemo', width: 200 }
					, { field: 'score', title: '评分', width: 80, sort: true }
					, { field: 'classify', title: '职业', width: 80 }
					, { field: 'wealth', title: '财富', width: 135, sort: true }
				]]
				//,…… //其他参数 
			});

			//table工具条事件
			table.on('toolbar(test)', function (obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				layer.msg(obj.event);
			});

			//行内工具条事件
			table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

				console.log("layEvent is triggered!", layEvent)

				if (layEvent === 'detail') { //查看
					//do somehing
					layer.msg("this is nothing to show")
				} else if (layEvent === 'del') { //删除
					layer.confirm('真的删除行么', function (index) {
						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
						layer.close(index);
						//向服务端发送删除指令
					});
				} else if (layEvent === 'edit') { //编辑
					//do something

					//同步更新缓存对应的值
					obj.update({
						username: '123'
						, title: 'xxx'
					});
				} else if (layEvent === 'LAYTABLE_TIPS') {
					layer.alert('Hi，头部工具栏扩展的右侧图标。');
				}
			});

			//触发复选框选择
			table.on('checkbox(test)', function (obj) {
				console.log(obj); //当前行的一些常用操作集合
				// console.log(obj.checked); //当前是否选中状态
				// console.log(obj.data); //选中行的相关数据
				// console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
			});

			//触发单选框选择
			table.on('radio(test)', function (obj) { //test 是 table 标签对应的 lay-filter 属性
				console.log(obj); //当前行的一些常用操作集合
				// console.log(obj.checked); //当前是否选中状态
				// console.log(obj.data); //选中行的相关数据
			});


			//触发单元格编辑
			table.on('edit(test)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
				console.log(obj)
				// console.log(obj.value); //得到修改后的值
				// console.log(obj.field); //当前编辑的字段名
				// console.log(obj.data); //所在行的所有相关数据  
			});

			//触发行单双击事件
			//触发行单击事件
			table.on('row(test)', function (obj) {
				console.log(obj.tr) //得到当前行元素对象
				console.log(obj.data) //得到当前行数据
				//obj.del(); //删除当前行
				//obj.update(fields) //修改当前行数据
			});

			//触发行双击事件
			table.on('rowDouble(test)', function (obj) {
				//obj 同上
			});

			//触发排序事件 (注意：既然改为 服务端排序，那么需要将配置  autoSort = false)
			table.on('sort(test)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				console.log(obj.field); //当前排序的字段名
				console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
				console.log(this); //当前排序的 th 对象

				//尽管我们的 table 自带排序功能，但并没有请求服务端。
				//有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
				table.reload('demo', {
					initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
					, where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
						field: obj.field //排序字段
						, order: obj.type //排序方式
					}
				});

				layer.msg('服务端排序。order by ' + obj.field + ' ' + obj.type);
			});

		});
	</script>


</body>

</html>